/***********************效果***********************/
.shadow {
  --SHc: rgba(0, 0, 0, 0.2);
  filter: drop-shadow(var(--SHc) 3rem 3rem 12rem);
}
//点击效果
.active:active {
  filter: brightness(90%) invert(0.3);
}
.border-B {
  --BOc: var(--C-T1-O1);
  border-bottom: solid 1rem var(--BOc);
}
.border-T {
  --BOc: var(--C-T1-O1);
  border-top: solid 1rem var(--BOc);
}
.border-all {
  --BOc: var(--C-T1-O1);
  border: solid 1rem var(--BOc);
}
.shadow-M1 {
  filter: drop-shadow(var(--C-M1-O5) 0rem 0rem 12rem);
}
.B-img {
  background-image: var(--bg-img);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.clip-path-1 {
  --clip-size: 30rem;
  --clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--clip-size)),
    calc(100% - var(--clip-size)) 100%,
    0 100%
  );
  -webkit-clip-path: var(--clip-path);
  clip-path: var(--clip-path);
  border-radius: 0 !important;

  position: relative;

  @mixin border() {
    content: "";
    position: absolute;
    height: 0;
    width: 100rem;
    border-top: solid 1rem var(--C-M1-O3);
  }
  &::after {
    @include border();
    top: 6rem;
    left: 4rem;
  }
  &::before {
    @include border();
    bottom: 6rem;
    right: var(--clip-size);
  }
}
.clip-path-2 {
  --clip-size: 30rem;
  --clip-path: polygon(
    0 var(--clip-size),
    var(--clip-size) 0,
    100% 0,
    100% calc(100% - var(--clip-size)),
    calc(100% - var(--clip-size)) 100%,
    0 100%
  );
  -webkit-clip-path: var(--clip-path);
  clip-path: var(--clip-path);
  border-radius: 0 !important;

  position: relative;

  @mixin border() {
    content: "";
    display: block;
    position: absolute;
    height: 4rem;
    width: 180rem;
    border-top: solid 1rem var(--C-M1);
    border-bottom: solid 1rem var(--C-M1);
  }
  &::after {
    @include border();
    top: 6rem;
    right: 0;
    --clip-path-after: polygon(
      0% 0%,
      0% 100%,
      25% 100%,
      25% 25%,
      75% 25%,
      75% 100%,
      25% 100%,
      25% 100%,
      100% 100%,
      100% 0%
    );
    clip-path: var(--clip-path-after);
    -webkit-clip-path: var(--clip-path-after);
  }
  &::before {
    --clip-path-before: polygon(
      0 22%,
      37% 22%,
      37% 0,
      74% 0,
      74% 23%,
      100% 23%,
      100% 100%,
      0 100%
    );
    clip-path: var(--clip-path-before);
    -webkit-clip-path: var(--clip-path-before);
    @include border();
    bottom: 6rem;
    left: 0;
  }
}
.van-dialog {
  position: fixed;
  &::before {
    bottom: var(--van-dialog-button-height);
  }
}
